<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>多文件异步上传</title>
    <style type="text/css">
        progress {
            background-color: #56BE64;
        }

        progress::-webkit-progress-bar {
            background: #ccc;
        }

        progress::-webkit-progress-value {
            background: #56BE64;
        }

        percentage {
            position: fixed;
            left: 260px;
        }
    </style>
</head>
<body>
<form id="uploadForm" method="post" action="/File/upload" enctype="multipart/form-data">
    <div>
        <input type="button" value="选择文件" onclick="javascript:$('input[name=\'filelist\']').click();" />
        <input type="file" multiple="multiple" id="files" name="filelist" style="display: none;" onchange="uploadList()"/>
    </div>
    <input type="button" value="上传" id="btnUpload" onclick="upload()">
    <div id="msg" style="display: none"></div>
</form>
<table id="fileDiv" border="1">
    <tr>
        <th>文件名</th>
        <th>进度条</th>
        <th>完成情况</th>
    </tr>
</table>
<script>
    function uploadList() {
        var files = document.getElementById("files").files;
        var fileList = "<tr>";
        for (var i = 0; i < files.length; i++) {
            var file = files[i].name;
            fileList += "<tr><td>" + file + "</td>";
            fileList += "<td style=\"width: 200px;height: 100px\"><div> <span style='width: 100px; display: inline-block; text-align: right'>上传进度：</span> " +
                            "<progress id='progress"+ i +"'></progress> " +
                            "<span id='percentage" + i + "'>0%</span>" +
                            "</div>";
            fileList += "<div>" +
                        "<span style='width: 100px; display: inline-block; text-align: right'>上传速度：</span>" +
                        "<span style='width: 300px;' class='progress-speed' id='speed" + i +"'>0 M/S, 0/0M</span>" +
                        "</div>" +
                        "</td><td></td></tr>";
        }
        $("#fileDiv").append(fileList);
    }

    function upload() {
        var files = document.getElementById("files").files;
        for (let i = 0; i < files.length; i++) {
            var formData = new FormData();
            formData.append("file", files[i]);
            $.ajax({
                type: "POST",
                url: '/File/upload',
                enctype: 'multipart/form-data',
                data: formData,
                contentType: false,
                cache: false,
                processData: false,
                error: function () {
                    console.log("error");
                    $("#msg").text("访问服务器错误，请重试！");
                },
                success: function () {
                    console.log("成功");
                },
                xhr: function () {
                    var xhr = $.ajaxSettings.xhr();
                    var start = new Date().getTime();;
                    if (xhr.upload) {
                        // 处理进度条的事件
                        xhr.upload.addEventListener("progress", function (e) {
                            $('#progress' + i).attr({value: e.loaded, max: e.total});
                            var percent = e.loaded / e.total * 100;
                            var time = ((new Date().getTime() - start) / 1000).toFixed(3);
                            if (time == 0) {
                                time = 1;
                            }
                            $('#speed' + i).html(((e.loaded / 1024) / 1024 / time).toFixed(2) + "M/S, " + ((e.loaded / 1024) / 1024).toFixed(2) + "/" + ((e.total / 1024) / 1024).toFixed(2) + "MB.");
                            $('#percentage' + i).html(percent.toFixed(2) + "%");
                        });
                        return xhr;
                    }
                }
            }, 'json');
        }
    }
</script>
<script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
</body>
</html>